<template>
<el-form
      :rules="rules"
      ref="loginForm"
      v-loading="loading"
      element-loading-text="正在登录..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :model="loginForm"
      label-width="80px"
      class="loginContainer">
  <h3 class="loginTitle">系统登录</h3>
  <el-form-item label="用户名" prop="username">
    <!--
      宽度350px,上下外边距180px,左右外边距等宽 placeholder 属性规定可描述输入字段预期值的简短的提示信息 auto-complet 输入框自动提示完成功能-->
    <el-input v-model="loginForm.username"  type="text" placeholder="请输入用户名" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item label="密  码" prop="password">
    <el-input v-model="loginForm.password"  type="password" placeholder="请输入密码" auto-complete="off"></el-input>
  </el-form-item>
      <!-- <el-checkbox class="login_remember" v-model="checked"
                 label-position="left">记住密码</el-checkbox> -->
  <el-form-item>
    <el-button type="primary" @click="onSubmit()">登陆</el-button>
    <el-button @click="cancel()">取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      loginForm: {
        username: 'xiaoming',
        password: '123'
      },
      // 表单验证
      rules: {
        username: [
          {required: true, message: '请输入用户名称', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      // console.log('submit!')
      // 连接后台，登陆成功后要跳转到首页,提交的时候登陆验证
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 通过验证后提交登陆按钮出现加载效果
          this.loading = true
          // 表单提交到后端验证登陆
          // this.postRequest('/doLogin', this.loginForm).then(resp => {
          this.postRequest('/user/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          }).then(resp => {
            console.log(resp)
            this.loading = false
            if (resp && resp.code === 200) {
              // this.loading = false
              // 用户名和密码正确,跳转到首页,首先存储用户信息
              // this.$store.commit('INIT_CURRENTHR', resp.obj)
              // window.sessionStorage.setItem('user', JSON.stringify(resp.obj))
              // console.log(this.$route)
              let path = this.$route.query.redirect
              // console.log(path)
              // this.$router.replace((path === '/' || path === undefined) ? '/home' : path)
              this.$router.push((path === '/' || path === undefined) ? '/home' : path)
            }
            // else {
            //   // 用户名和密码不对后者其他原因
            //   this.$route.replace('/')
            // }
          }
          )
          // console.log('success!')
        } else {
          console.log('fail!')
        }
      })
    },
    cancel (formName) {
      console.log('submit!')
      // 连接后台，登陆成功后要跳转到首页,提交的时候登陆验证
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log('success!')
        } else {
          console.log('fail!')
        }
      })
    }

  }
}
</script>

<style>
  .loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    width: 350px;
    margin: 180px auto;
    background: #fff;
    padding: 35px 35px 15px 35px;
    border: 1px solid #eaeaea;
  };
  .loginTitle {
      margin: 15px auto 20px auto;
      text-align: center;
      color: #505458;
  };
  .login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
  }
</style>
